<template>
    <div>
        <!-- banner -->
        <div class="banner">
            <img src="../assets/img/banner_bg.png" alt="" srcset="">
            <img src="../assets/img/fire.gif" alt="" srcset="">
            <img :src="banners[state]" alt="" srcset="">
        </div>
        <!-- time line -->
        <div class="time-line-box">
            <img src="../assets/img/time_bg.png" alt="" class="time-bg">
            <div class="time-con flex">
                <div class="title flex">
                    <span>海选时间</span>
                    <span>投票时间</span>
                    <span>公布时间</span>
                </div>
                <div class="process">
                    <div class="last-box" :style="`width:${stateValue}`">
                        <img src="../assets/img/dott.png" alt="">
                    </div>
                </div>
                <div class="time flex">
                    <span>{{activeData.joinStartTimeFormat}}-{{activeData.joinEndTimeFormat}}</span>
                    <span>{{activeData.voteStartTimeFormat}}-{{activeData.voteEndTimeFormat}}</span>
                    <span>{{activeData.publishTimeFormat}}</span>
                </div>
            </div>
        </div>
        <!-- 悬浮按钮 -->
        <div class="btn join-rule" v-if="state!='public'" @click="touchJoinBtn" v-html="state=='join'? '投<br>稿<br>规<br>则' : '投<br>票<br>规<br>则'">
        </div>
        <div class="btn award-rule" @click="touchAwardBtn" v-html='"评<br>奖<br>规<br>则"'></div>
    </div>
</template>

<script>
import api from "../assets/models/api";
const oApi = new api();
export default {
  name: 'Banner',
  props:{
      state:{
        type: String,
        default: 'join'   
      }
  },
  data() {
    return {
      activeData: oApi.getActiveInfo(),
      banners:{
          join:require('../assets/img/banner_txt.png'),
          vote:require('../assets/img/banner_txt_vote.png'),
          public:require('../assets/img/banner_txt_publish.png')
      }
    };
  },
  methods: {
    //点击投稿规则
    touchJoinBtn(){
        this.$notice({
            type: this.state
        });
    }, 
    touchAwardBtn(){
        this.$notice({
            type: 'award'
        })
    }
  },
  computed:{
      stateValue(){
          return this.state=='join'?'15%':this.state=='vote'?'50%':'90%'
      }
  }
};
</script>

<style lang="stylus" scoped>
.flex
    display flex
.banner
    width 100%
    height 67vw
    position relative
    img 
        display block
        width 100%;
        position absolute
        top 0px
        left 0px
.time-line-box
    width 100%
    position relative
    z-index 1
    .time-bg
        width 100%
    .time-con
        width 100%
        height 100%
        color $font-color
        position absolute
        box-sizing border-box
        padding 30px 30px 40px
        top 0px
        left 0px
        display flex
        flex-direction column
        justify-content center
        align-items center
        .title
            font-size 14px
            width 100%
            justify-content space-around
        .process
            width 90%
            height 4px
            background #E51752
            border-radius 2px
            margin 10px 0
            .last-box
                width 15%
                height 4px
                background-image url('../assets/img/time_line.png')
                background-size auto 100%
                border-radius 2px
                position relative
                img
                    display block
                    position absolute
                    width 18px
                    right -6px
                    top -5.3px
        .time
            width 100%
            font-size 11px
            justify-content space-around
.btn
    width 22px
    text-align center
    line-height 14px
    font-size 11px
    box-shadow -1px 2px 4px 0px rgba(134,1,30,0.5) 
    border-radius 4px 0px 0px 4px
    padding 6px 0
    box-sizing border-box
    position fixed
    right 0px
    z-index 9
.join-rule
    background linear-gradient(180deg,rgba(255,0,87,1) 0%,rgba(189,0,41,1) 100%)
    color $font-color
    top  120px
.award-rule
    background linear-gradient(180deg,rgba(255,208,87,1) 0%,rgba(255,183,52,1) 100%)
    color #B90028
    top 200px
@media screen and (orientation:portrait)
    .btn
        display block
@media screen and (orientation:landscape)
    .btn
        display none
</style>
